body {
    --aa: 223px;
    --bb: 322px
}

.x {
    background-color: chocolate;
    width: var(--bb);
    height: var(--bb);
    border-radius: calc(var(--bb) / 2);
    position: absolute;
    top: calc(50% - var(--bb)/2);
    left: calc(50% - var(--bb)/2);
    z-index: 1;
}

.x::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: calc(var(--bb) / 2);
    position: absolute;
    top: 0;
    left: 0;
    background: inherit;
    filter: blur(10px);
    z-index: 2;
}

.y {
    background-color: chartreuse;
    width: var(--aa);
    height: var(--aa);
    border-radius: calc(var(--aa) / 2);
    position: absolute;
    top: calc(50% - var(--aa)/2);
    left: calc(50% - var(--aa)/2);
    /* filter: blur(0px); */
    z-index: 100;
}